<template>
  <div class="my-padding">
    <div style="padding-bottom: 1rem" align="right">
      <el-button @click="back">返回</el-button>
    </div>
    <el-table
      :data="allTypeList"
      element-loading-text="Loading"
      v-loading="isLoading"
      border
      fit
      ref="table"
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column label="类型名称" align="center">
        <template slot-scope="scope">{{ scope.row.typeName }}</template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="authorize(scope.row.typeId)" v-if="scope.row.isTrue==false">
            授权
          </el-button>
          <el-button type="warning" size="small" @click="authorizeCencle(scope.row.typeId)" v-else>取消授权</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import $ from "@/api/permissSet";

  export default {
    data() {
      return {
        form: {
          typeId: "",
          depCode: "",
        },
        isLoading:true,
        // 所有类别
        allTypeList: [],
        // 已存在类别
        existedList: [],
      };
    },
    created() {
      this.form.depCode = this.$route.query.id
      this.fetchData()

    },
    methods: {
      fetchData() {
        // 所有类别
        $.tbTypeList().then(res => {
          if (res.success) {
            this.allTypeList = res.data
            for (let type of this.allTypeList) {
              this.$set(type, "isTrue", false);
            }
            // console.log(this.allTypeList)
            // 已存在类别
            $.tbAuthDmList({deCode: this.$route.query.id}).then(res => {
              if (res.success) {
                // console.log(res.data)
                this.existedList = res.data
                for (let i = 0; i < this.allTypeList.length; i++) {
                  for (let j = 0; j < this.existedList.length; j++) {
                    if (this.allTypeList[i].typeId == this.existedList[j].typeId) {
                      this.allTypeList[i].isTrue = true
                    }

                  }
                }
                this.isLoading=false
              }
            })
          }
        })

      },
      // 授权
      authorize(id) {
        this.form.typeId = id
        $.tbAuthDmAdd(this.form).then(res => {
          if (res.success) {
            this.$message({
              type: "success",
              message: "授权成功"
            })
            this.fetchData()
          }
        })
      },
      // 取消授权
      authorizeCencle(id) {
        $.tbAuthDmDelete({typeId: id, deCode: this.$route.query.id}).then(res => {
          if (res.success) {
            this.$message({
              type: "success",
              message: "已取消授权"
            })
            this.fetchData()
          }
        })
      },
      back() {
        this.$router.replace({
          path: "index",
        })
      },
    }
  };
</script>

<style>
  .red {
    color: red;
    font-size: 1.5rem;
    vertical-align: middle;
  }
</style>
